<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="css/Demo2.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
        <!-- 左侧 开始 -->
       <header class="col-md-2">
            <div class="logo">
                    <a class="str" href="">
                        <image class="hidden-xs" src="./image/logo.png" mode="widthFix"  />
                        <span class="visible-xs">阿里百秀</span>
                    </a>  
                                    
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                    <li><a href="#" class="glyphicon glyphicon-hdd">自然汇</a></li>
                    <li><a href="#" class="glyphicon glyphicon-camera">科技潮</a></li>
                    <li><a href="#" class="glyphicon glyphicon-eye-open">奇趣事</a></li>
                    <li><a href="#" class="glyphicon glyphicon-apple">美食杰</a></li>

                </ul>
            </div>

       </header>
       <!-- 左侧结束 -->


       <!-- 中间 开始 -->
       <article class="col-md-7">
            <!-- 新闻    -->
            <div class="news clearfix">
                <ul>
                    <li>
                        <a href="#">
                            <image class="" src="image/188f-041ed4d06940314b1b8ebc71801417fa.jpg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
                            <p>阿里百秀</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image class="" src="image/188f-041ed4d06940314b1b8ebc71801417fa.jpg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
                            <p>阿里百秀</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image class="" src="image/188f-041ed4d06940314b1b8ebc71801417fa.jpg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
                            <p>阿里百秀</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image class="" src="image/188f-041ed4d06940314b1b8ebc71801417fa.jpg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
                            <p>阿里百秀</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image class="" src="image/188f-041ed4d06940314b1b8ebc71801417fa.jpg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
                            <p>阿里百秀</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 发表 -->
            <div class="publish">
                <div class="row">
                    <div class="col-sm-9">
                        
                        <h3>生活馆关于指甲的10个健康知识你知道几个?</h3>
                        <p class="text-muted hidden-xs">alibaixiu爱布于2015-11-23</p>
                        <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧!
                        </p>
                        <p class="text-muted">阅读(2417)评论(1赞(18)标签︰健康/感染/指甲/疾病/皮肤/营养/趣味生活
                        </p>
                    </div>
                    <div class="col-sm-3 hidden-xs">
                        <div class="str2"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        
                        <h3>生活馆关于指甲的10个健康知识你知道几个?</h3>
                        <p class="text-muted hidden-xs">alibaixiu爱布于2015-11-23</p>
                        <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧!
                        </p>
                        <p class="text-muted">阅读(2417)评论(1赞(18)标签︰健康/感染/指甲/疾病/皮肤/营养/趣味生活
                        </p>
                    </div>
                    <div class="col-sm-3 hidden-xs">
                        <div class="str2"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        
                        <h3>生活馆关于指甲的10个健康知识你知道几个?</h3>
                        <p class="text-muted hidden-xs">alibaixiu爱布于2015-11-23</p>
                        <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧!
                        </p>
                        <p class="text-muted">阅读(2417)评论(1赞(18)标签︰健康/感染/指甲/疾病/皮肤/营养/趣味生活
                        </p>
                    </div>
                    <div class="col-sm-3 hidden-xs">
                        <div class="str2"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        
                        <h3>生活馆关于指甲的10个健康知识你知道几个?</h3>
                        <p class="text-muted hidden-xs">alibaixiu爱布于2015-11-23</p>
                        <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧!
                        </p>
                        <p class="text-muted">阅读(2417)评论(1赞(18)标签︰健康/感染/指甲/疾病/皮肤/营养/趣味生活
                        </p>
                    </div>
                    <div class="col-sm-3 hidden-xs">
                        <div class="str2"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        
                        <h3>生活馆关于指甲的10个健康知识你知道几个?</h3>
                        <p class="text-muted hidden-xs">alibaixiu爱布于2015-11-23</p>
                        <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧!
                        </p>
                        <p class="text-muted">阅读(2417)评论(1赞(18)标签︰健康/感染/指甲/疾病/皮肤/营养/趣味生活
                        </p>
                    </div>
                    <div class="col-sm-3 hidden-xs">
                        <div class="str2"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9">
                        
                        <h3>生活馆关于指甲的10个健康知识你知道几个?</h3>
                        <p class="text-muted hidden-xs">alibaixiu爱布于2015-11-23</p>
                        <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧!
                        </p>
                        <p class="text-muted">阅读(2417)评论(1赞(18)标签︰健康/感染/指甲/疾病/皮肤/营养/趣味生活
                        </p>
                    </div>
                    <div class="col-sm-3 hidden-xs">
                        <div class="str2"></div>
                    </div>
                </div>
            </div>
            

       </article>
        <!-- 中间 结束 -->


        <!-- 右侧 开始 -->
       <aside class="col-md-3">
           <a href="#" class="banner">
               <img src="./image/9794-7df972b62ea99e914b5341650a78d4b1.jpg" mode="widthFix" alt="">
           </a>
           <a href="#" class="hot">
               <span style="margin-left: 10px;" class="btn btn-primary">热搜</span>
               <h4 class="text-primary">欢迎加入中国播客联盟</h4>
               <p>这里收录国内各个领域的优秀播客，是一个全人工编辑的开放式播客平台...</p>
           </a>
       </aside>
       <!-- 右侧 结束 -->
    </div>    



 
  </body>
</html>